<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <!--<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />-->
    <meta name="renderer" content="webkit"/>
    <title></title>
    <link rel="stylesheet" href="__CSS__/pintuer.css"/>
    <link rel="stylesheet" href="__CSS__/admin.css"/>
    <link rel="stylesheet" href="__CSS__/jquery.datetimepicker.css"/>
    <script src="__JS__/jquery-1.8.3.min.js"></script>
    <script src="__JS__/jquery.js"></script>
    <script src="__JS__/pintuer.js"></script>
    <link href="__JS__/bootstrap-3.3.4.css" rel="stylesheet"/>
    <!--<script type="text/javascript" src="__JS__/merchant_submit/merchant_submit.js" charset="utf-8"></script>-->

    <script src="__JS__/layer/layer.js"></script>

</head>
<body>
<div class="panel admin-panel">
    <div class="panel-head" id="add"><strong><span class="icon-pencil-square-o"></span>增加内容</strong></div>
    <div class="body-content">
        <form method="post" class="form-x" action="{:url('Mailbox/mailbox_add_show')}?mailbox_id={$mailbox_id}" enctype="multipart/form-data" id="form">
            <div class="form-group">
                <div class="label">
                    <label>客房名：</label>
                </div>
                <div class="field">
                    <input type="text" class="input w50" value="" name="Mailbox_name" id="mailbox_name" data-validate="required:请输入内容" />
                    <div class="tips"></div>
                </div>
            </div>
            <div class="form-group">
                <div class="label">
                    <label>图片：</label>
                </div>
                  {volist name='bo' id='v'}
                <div class="field" style="position: relative;">
                    <input type="button" class="button bg-blue margin-left" id="image1" value="+ 浏览上传"  style="float:left;position: absolute;z-index: 1;"/>
                    <input id="file0" type="file"  onclick="preview0(this)" name="file[0]" style="position: absolute;z-index:21;opacity: 0;padding: 10px 15px 10px 10px;width: 115.532px;"/>
                    <img src="__UPLOADS__/{$v.img}" id="img0" name="file" class="img-circle m-t-xs img-responsive" style="margin-left:140px;margin-top:-20px;width:100px;position:absolute;">
                </div>
              {/volist}
            </div>
            <div class="form-group">
            <div class="label">
                <label>客房详情图：</label>
            </div>
            <div class="field" style="position: relative;">
                <input type="button" class="button bg-blue margin-left" id="image1" value="+ 浏览上传"  style="float:left;position: absolute;z-index: 1;"/>
                <input type="file" id="file1" onchange="preview1(this)"  name="file[1]"  style="position: absolute;z-index:21;opacity: 0;padding: 10px 15px 10px 10px;width: 115.532px;"/>
                <img src="__UPLOADS__/{$v.img}" id="img1" name="file" class="img-circle m-t-xs img-responsive" style="margin-top:-10px;margin-left:110px;width:100px;position:absolute;">
                <input type="button" class="button bg-blue margin-left" id="image1" value="+ 浏览上传"  style="margin-left:210px;float:left;position: absolute;z-index: 1;"/>
                <input type="file" id="file2" onchange="preview2(this)" name="file[2]" style="margin-left:260px;position: absolute;z-index:21;opacity: 0;padding: 10px 15px 10px 10px;width: 115.532px;"/>
                <img src="__UPLOADS__/{$v.img}" id="img2" name="file" class="img-circle m-t-xs img-responsive" style="margin-top:-10px;margin-left:310px;width:100px;position:absolute;">
                <input type="button" class="button bg-blue margin-left" id="image1" value="+ 浏览上传"  style="margin-left:410px;float:left;position: absolute;z-index: 1;"/>
                <input type="file" id="file3" onchange="preview3(this)" name="file[3]" style="margin-left:440px;position: absolute;z-index:21;opacity: 0;padding: 10px 15px 10px 10px;width: 115.532px;"/>
                <img src="__UPLOADS__/{$v.img}" id="img3" name="file" class="img-circle m-t-xs img-responsive" style="margin-top:-10px;margin-left:510px;width:100px;position:absolute;">
            </div>
             </div>
            <div class="form-group">
                <div class="label">
                    <label>价格：</label>
                </div>
                <div class="field">
                    <input type="text" class="input w50" value="" name="amounts" id="amounts" data-validate="required:请输入内容" />
                    <div class="tips"></div>
                </div>
            </div>
            <div class="form-group">
                <div class="label">
                    <label>介绍：</label>
                </div>
                <div class="field">
                    <textarea class="input" name="mailbox_introduction" id="mailbox_introduction"></textarea>
                    <div class="tips"></div>
                </div>
            </div>
            <div class="form-group">
                <div class="label">
                    <label>发布时间：</label>
                </div>
                <div class="field">
                    <input type="text" value="" name="mailbox_time" class="input w50" id="datetimepicker_mask"/>
                    <!--<input type="text" value="" id="datetimepicker_mask merchant_detailed" class="input w50" value="" name="merchant_detailed"/>-->
                    <!--<input type="text"  id="merchant_detailed" data-validate="required:请输入内容" />-->
                    <div class="tips"></div>
                </div>
            </div>
            <div class="form-group">
                <div class="label">
                    <label></label>
                </div>
                <div class="field">
                    <input type="submit" class="button bg-main icon-check-square-o" id="admin_add_tj" value="提交">
                </div>
            </div>
        </form>

    </div>
</div>
<!--<script src="http://www.jq22.com/jquery/1.11.1/jquery.min.js"></script>-->
<!--<script src="http://www.jq22.com/jquery/bootstrap-3.3.4.js"></script>-->
<script src="__JS__/distpicker.data.js"></script>
<script src="__JS__/distpicker.js"></script>
<script src="__JS__/main.js"></script>
<script src="__JS__/jquery.js"></script>
<script src="__JS__/jquery.datetimepicker.js"></script>
</body></html>
<script>
    function changeSrc()
    {
        document.getElementById("file0").src="__UPLOADS__src";
    }
    $('#datetimepicker_mask').datetimepicker({
//        mask:'9999/19/39 29:59'
    });
    var url = "{:url('Index/index')}";
    $("#file0").change(function(){
        // getObjectURL是自定义的函数，见下面
        // this.files[0]代表的是选择的文件资源的第一个，因为上面写了 multiple="multiple" 就表示上传文件可能不止一个
        // ，但是这里只读取第一个
        var objUrl = getObjectURL(this.files[0]) ;
        // 这句代码没什么作用，删掉也可以
        // console.log("objUrl = "+objUrl) ;
        if (objUrl) {
            // 在这里修改图片的地址属性
            $("#img0").attr("src", objUrl) ;

        }
    }) ;
    $("#file1").change(function(){
        // getObjectURL是自定义的函数，见下面
        // this.files[0]代表的是选择的文件资源的第一个，因为上面写了 multiple="multiple" 就表示上传文件可能不止一个
        // ，但是这里只读取第一个
        var objUrl = getObjectURL(this.files[0]) ;
        // 这句代码没什么作用，删掉也可以
        // console.log("objUrl = "+objUrl) ;
        if (objUrl) {
            // 在这里修改图片的地址属性
            $("#img1").attr("src", objUrl) ;
        }
    });
    $("#file2").change(function(){
        var objUrl = getObjectURL(this.files[0]);
        if (objUrl) {
            // 在这里修改图片的地址属性
            $("#img2").attr("src", objUrl) ;
        }
    });
    $("#file3").change(function(){
        var objUrl = getObjectURL(this.files[0]);
        if (objUrl) {
            // 在这里修改图片的地址属性
            $("#img3").attr("src", objUrl) ;
        }
    });
    //建立一個可存取到該file的url
    function getObjectURL(file) {
        var url = null ;
        // 下面函数执行的效果是一样的，只是需要针对不同的浏览器执行不同的 js 函数而已
        if (window.createObjectURL!=undefined) { // basic
            url = window.createObjectURL(file) ;
        } else if (window.URL!=undefined) { // mozilla(firefox)
            url = window.URL.createObjectURL(file) ;
        } else if (window.webkitURL!=undefined) { // webkit or chrome
            url = window.webkitURL.createObjectURL(file) ;
        }
        return url ;
    }
</script>